這一篇主要敘述如何建立一個看起來厲害的vue專案

下面這個網址是VUE的官方網站

https://cn.vuejs.org/v2/guide/

雖然是中文網頁，但是對於沒寫過前端的人來說，應該從“介紹  vue是什麼?" 這邊開始就看不是很懂了。

上一篇簡介說過，我不打算介紹專有名詞跟原理，

所以....跳過吧

網路上教學大部分會從用CDN引入vue.js開始，不過這樣接下來還要安裝引用不少東西，

如果要包裝網頁還要用webpack，

路由還要寫router.js，

還要額外寫Layout，

恩...又是一堆專有名詞

所以...跳過！

最簡單的方式就是拿別人做好的範本直接拿來用，

如果有別人蓋好的房子，我們何必自己砌牆呢？

我們到下面的網址

https://github.com/ElementUI/element-starter

可以看到頁面上這個綠色按鈕 Clone or download

按下後選擇Download ZIP 下載回來後解壓縮，會得到以下檔案

這時開啟安裝好的VSCode ，

選擇「檔案」-> 「開啟...」

點選剛剛解壓縮的資料夾開啟，應該就會把整個資料夾檔案讀進來VSCode

接下來我們來看看README.md，

點選README.md 內容就會出現在右邊的視窗裡

這邊可以看到一些開發跟發佈的指令，看不懂沒關係下面會一步一步做。

首先先點選工具列的『終端機』->『新增終端機』，

或是直接按 command+J (windows按 Ctrl+J)

這時下方會出現一個新個分割視窗

如果之前有安裝yarn的，請在終端機輸入

yarn

後按下enter

如果沒有就輸入

npm install

後按下enter

這時就會自動安裝一些這個網站需要的套件

等他跑完後

輸入

npm run dev

或是

yarn run dev

按下 enter

這時會跑一大堆像咒文的東西，看不懂也沒關係。

直到跑出

webpack: Compiled successfully.

這一行之後，

我們就可以開啟Chrome，

網址輸入

http://localhost:8010/

這時就可以看到第一個VUE網頁起來了

如果要關掉就在剛剛終端機的部分輸入

ctrl+c

(windows輸入ctrl+c 然後他會詢問是否要關閉，輸入Y後enter)

就可以關閉了

這篇先講到這

下一篇預計會開始談一些按鈕、輸入框之類的實用功能